{% if banners %}
<div class="swiper-viewport module-carousel">
	<h4 class="widget-title">
		<span>{{ heading_title }}</span>
	</h4>
	<div class="swiper-wrapper">
		<div id="carousel{{ module }}" class="swiper-container">
			<div class="swiper-wrapper">
				{% for banner in banners %}
					<div class="swiper-slide text-center">
						{% if banner.link %}
							<a href="{{ banner.link }}"  class="image">
								<img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive" />
							</a>
						{% else %}
							<a class="image">
								<img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive" />
							</a>
						{% endif %}
					</div>
				{% endfor %}
			</div>
		</div>
	</div>
	<!-- <div class="swiper-pagination carousel{{ module }}"></div> -->
	<div class="swiper-pager">
		<div class="swiper-button-next carousel-next-{{ module }}"></div>
		<div class="swiper-button-prev carousel-prev-{{ module }}"></div>
	</div>
</div>
<script type="text/javascript">
    jQuery(document).ready(function($) {
        var slideshow{{ module }}_swiper = new Swiper('#carousel{{ module }}', {
            slidesPerView: 6,
            navigation: {
                nextEl: '.carousel-next-{{ module }}',
                prevEl: '.carousel-prev-{{ module }}'
            },
            autoplay: {
                delay: 3000,
                disableOnInteraction: false
            },
            spaceBetween: 66,
            loop: true
        });
    });
</script>
{% endif %}
